<template>
    <div>
        <el-drawer custom-class="reset" v-model="showDrawer" size="462px">
            <div class="container">
                <div class="head-box">
                    <div class="flex flex-jc-sb">
                        <div class="mg-t-28">
                            <div class="fs-20 bold">{{ itemDetail.serveCompanyName }}</div>
                            <!-- <div class="fs-14 mg-t-5">负责人：{{ itemDetail.name || '佚名' }}</div> -->
                        </div>
                        <img class="icon-bg1" src="../../../assets/img/long-insure-dispatch/bg-1.png" alt="">
                    </div>
                    <div v-if="itemDetail.remark" class="hint-box flex flex-ai-c">
                        <img class="icon-hint" src="../../../assets/img/long-insure-dispatch/icon-hint.png" alt="">
                        <div class="fc-grey fs-14">特别约定：{{ itemDetail.remark }}</div>
                    </div>
                    <el-icon class="icon-close pointer" @click="onCloseDrawer">
                        <Close />
                    </el-icon>
                </div>
                <div v-if="itemDetail.occupationList?.length" class="item-box mg-t-8">
                    <OccupationCard :list-data="itemDetail.occupationList || []" show-video
                        :video-list="itemDetail.fileDetailList" />
                </div>
                <div class="video-container">
                    <div class="fs-16 bold mg-t-28 mg-b-10">申请列表</div>
                    <template v-for="(i, index) in recordList" :key="index">
                        <ApplyItem class="mg-b-10" :itemData="i"
                            :show-button="index === 0 && recordList[0].status === 0" @confirm="onHandleConfirm" />
                    </template>
                </div>
                <div class="footer-container">
                    <div class="footer-box flex flex-jc-end">
                        <el-button type="danger" @click="onDelete" :disabled="itemDetail.status === 3">删除企业</el-button>
                        <el-button type="primary" :disabled="itemDetail.status === 3  || itemDetail.status === 0 || itemDetail.status === 2 || (itemDetail.status === 1 && itemDetail.occupationRecord
            ?.status === 0)" @click="onApply">申请新工种</el-button>
                    </div>
                </div>
            </div>
        </el-drawer>
        <DialogAddCompany v-model:show="showAddCompany" :cur-company-id="itemDetail.serveCompanyId" :id="itemDetail.id"
            add-type="apply" @success="onRefresh" />
    </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { cloneDeep } from 'lodash'
import { ElMessageBox, ElMessage } from 'element-plus'
import {
    deleteDispatchExamine,
    cancelDispatchExamine,
    getOccupationDetailById,
    getOccupationList,
    deleteOccupation
} from '@/api/long-insure'
import OccupationCard from '../long-insure-dispatch/OccupationCard.vue'
import ApplyItem from '../long-insure-dispatch/ApplyItem.vue'
import DialogAddCompany from '../long-insure-dispatch/DialogAddCompany.vue'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    id: {
        type: Number
    }
})

const emits = defineEmits(['update:show', 'success'])

let showDrawer = ref(false)
let showAddOccupation = ref(false)
let itemDetail = ref({}) as any
let detailData = ref({})

let showAddCompany = ref(false)

let recordList = ref([]) as any

/**
 * 撤销
 * @param item
 */
const onHandleConfirm = (item: any) => {
    if (itemDetail.value.status === 0) {
        handleWithDrawCompany()
    } else {
        handleWithDrawOccupation()
    }
}
/**
 * 撤销审核单位
 */
const handleWithDrawCompany = async () => {
    ElMessageBox.confirm(
        '确定撤销该条记录？',
        '撤销确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(async () => {
            const result = await cancelDispatchExamine({ id: itemDetail.value.id })
            emits('success')
            ElMessage.success('撤销成功！')
            onCloseDrawer()
        })
}
/**
 * 撤销工种
 */
const handleWithDrawOccupation = async () => {
    ElMessageBox.confirm(
        '确定撤销该条记录？',
        '撤销确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(async () => {
            const result = await deleteOccupation(recordList.value[0].id)
            ElMessage.success('撤销成功！')
            emits('success')
            await getData()
        })
}
/**
 * 点击申请新工种
 */
const onApply = () => {
    showAddCompany.value = true
}

const onCloseDrawer = () => {
    showDrawer.value = false
}

/**
 * 删除派遣单位
 */
const onDelete = () => {
    ElMessageBox.confirm(
        '删除后该企业将无法投保，已申请是工种将被清除，确定删除？',
        '删除投保企业确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(async () => {
            const result = await deleteDispatchExamine({ id: props.id })
            ElMessage.success('删除成功！')
            emits('success')
            onCloseDrawer()
        })
}

const onRefresh = async () => {
    emits('success')
    await getData()
    // onCloseDrawer()
}

const getData = async () => {
    const res = await getOccupationDetailById(props.id)
    itemDetail.value = res
    if (res.status === 0) {
        recordList.value = [
            {
                createTime: res.createTime,
                createUserName: res.createUserName,
                fileDetails: res.fileDetails,
                status: res.status
            }
        ]
    } else {
        await getOccupationData()
    }
}

const getOccupationData = async () => {
    const res = await getOccupationList({
        periodServeCompanyId: props.id,
        isDelete: 0
    })
    recordList.value = res
}

watch(() => props.show, (newval) => {
    showDrawer.value = newval
})

watch(showDrawer, (newval) => {
    emits('update:show', newval)
})

watch(() => props.id, async (newval) => {
    if (newval) {
        await getData()
    }
    // detailData.value = cloneDeep(newval)
})

</script>
<style lang="stylus" scoped>
.container {
    height: calc(100vh - 82px);
    overflow: auto;
}
:deep().reset .el-drawer__header {
    display: none !important;
}

:deep().reset .el-drawer__body {
    padding: 0 !important;
}

.head-box {
    width: 100%;
    height: 130px;
    background: url('../../../assets/img/long-insure-dispatch/bg.png') no-repeat 100% 0;
    padding: 0 24px;
    position: relative;

    &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 20px;
        background: linear-gradient(transparent 0%, #fff);
        left: 0;
        bottom: 0;
    }
}

.icon-bg1 {
    width: 123px;
    height: 123px;
}

.icon-hint {
    width: 18px;
    height: 18px;
}

.hint-box {
    background: #F0F7FF;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: -30px;
}

.item-box {
    position: relative;
    padding: 0 24px;
}
.footer-container {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 462px;
}
.footer-box {
    padding: 16px 20px;
    box-sizing: border-box;
    box-shadow: 0px -5px 11px 0px rgba(0, 0, 0, 0.05);
}
.video-container {
    padding: 0 24px;
}
.icon-close {
    position: absolute;
    font-size: 20px;
    top: 20px;
    right: 20px;
}
</style>
